import {Button, Dropdown, Input} from "antd";
import {useEffect, useState} from "react";
import HttpRequestUtils from "../../utils/HttpRequestUtils";
import httpRequestUtils from "../../utils/HttpRequestUtils";
import gengzpMqApis from "../../apis/apis";

const ConsumerQuery = (props) => {

    const {messageApi, topicName, setTopicName, setConsumers} = props;
    // 所有主题名下拉框
    const [allTopicNames, setAllTopicNames] = useState([]);

    /**
     * 页面自动查询所有topic名称
     */
    useEffect(() => {
        HttpRequestUtils.post(gengzpMqApis.queryAllTopicName, {}).then(res => {
            if (res.code === 200) {
                setAllTopicNames(res.data);
            }
        })
    }, [])

    /**
     * 根据topic查询所有消费者信息
     */
    const queryAllConsumerByTopicName = () => {
        httpRequestUtils.post(gengzpMqApis.queryAllConsumer, {
            "topic": topicName
        }).then(res => {
            if (res.code === 200) {
                setConsumers(res.data.consumers);
            } else {
                messageApi.error(res.message);
            }
        })
    }

    return (
        <div>
            <div style={{display: 'flex'}}>
                <div style={{display: 'flex'}}>
                    <div style={{display: 'flex', alignItems: 'center'}}>
                        主题：
                    </div>
                    <div style={{display: 'flex', alignItems: 'center'}}>
                        <Dropdown
                            menu={{
                                items: allTopicNames.map(item => {
                                    return {
                                        key: item,
                                        label: <a onClick={() => {
                                            setTopicName(item)
                                        }}>
                                            {item}
                                        </a>
                                    }
                                })
                            }}
                        >
                            <Input
                                placeholder="请选择Topic"
                                style={{width: '200px'}}
                                value={topicName}
                                onClick={() => {
                                    setTopicName("");
                                }}
                            />
                        </Dropdown>
                    </div>
                    <div style={{display: 'flex', alignItems: 'center', marginLeft: '10px'}}>
                        <Button type={'primary'} onClick={() => {
                            queryAllConsumerByTopicName();
                        }}>
                            查询
                        </Button>
                    </div>
                    <div style={{display: 'flex', alignItems: 'center', marginLeft: '3px'}}>
                        <span>（该页面不会展示所有消费者列表，请输入主题名称进行查询）</span>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ConsumerQuery;